<template>
  <div class="app-container">
    <h1>{{ roles }}</h1>
    <el-radio-group v-model="roles" @change="handleRolesChange">
      <el-radio-button label="admin">管理员</el-radio-button>
      <el-radio-button label="user">用户</el-radio-button>
      <el-radio-button label="restaurant">餐厅</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: "PagePermission",
  data() {
    return {
      roles: "",
      loginForm: {
        username: "",
        password: "123456"
      }
    };
  },
  created() {
    this.roles = this.$store.getters.name;
  },
  methods: {
    handleRolesChange(e) {
      console.log(e);
      this.loginForm.username = e;
      console.log(this.loginForm);
      this.$store.dispatch("user/logout").then(() => {
        this.handleLogin(this.loginForm);
      });
      console.log(this.loginForm);
    },
    handleLogin(loginForm) {
      this.loading = true;
      this.$store
        .dispatch("user/login", loginForm)
        .then(() => {
          this.$router.push({
            path: "/",
            query: this.otherQuery
          });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
    // adminLogin() {
    //   this.loginForm = {
    //     username: "admin",
    //     password: "123456"
    //   };
    //   this.handleLogin();
    // },
    // userLogin() {
    //   this.loginForm = {
    //     username: "user",
    //     password: "123456"
    //   };
    //   this.handleLogin();
    // },
    // restaurantLogin() {
    //   this.loginForm = {
    //     username: "restaurant",
    //     password: "123456"
    //   };
    //   this.handleLogin();
    // }
  }
};
</script>
